import styled from "styled-components";

export const CustomerCreditContainer = styled.div<{ minHeight?: number }>`
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: ${(p) => (p.minHeight || 100) + "px"};
`;

export const CustomerCreditInner = styled.div`
  width: 100%;
  height: 100%;
  overflow-y: auto;
  color: #d5e7ff;
  padding-right: 8px;
  ::-webkit-scrollbar {
    display: none;
  }
`;

export const CustomerCreditItemWrap = styled.div<{ itemHeight: number }>`
  min-height: ${(p) => p.itemHeight + "px"};
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const PercentItem = styled.div`
  font-size: 14px;

  font-weight: 400;
  font-style: italic;
  color: #afbfe0;
  width: 95px;
  text-align: right;
  padding-left: 12px;
  height: 100%;
  padding-top: 38px;
`;

export const LeftItem = styled.div`
  flex: 1;
  height: 100%;
  width: calc(100% - 1250px);
`;

export const ItemNameLineWrap = styled.div`
  display: flex;
  width: 100%;
  margin-bottom: 12px;
`;

export const ItemNameStyle = styled.span`
  text-align: left;
  font-size: 14px;

  font-weight: 400;
  font-style: italic;
  color: #d5e7ff;
  flex: 1;

  display: inline-block;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
`;

export const ItemUnitNameStyle = styled.span<{ primaryColor?: string }>`
  font-size: 12px;
  color: #ffbb5a;
  font-weight: 400;
  color: ${(p) => p.primaryColor || "#ffbb5a"};
`;

export const CountUpWrap = styled.div<{ primaryColor?: string }>`
  width: 100px;
  text-align: right;

  font-size: 18px;

  font-weight: 400;
  color: ${(p) => p.primaryColor || "#ffbb5a"};
`;
